

<template>
  <div class="detailed-gender-out">
    <div class="detailed-item" id="detailed-rate-main">
    </div>
  </div>
</template>

<style scoped>

</style>

<script setup>

import {useDetailedStore} from "@/store/useDetailedStore.js";
import {onMounted} from "vue";
import {detailedRateEvent} from "@/consts/eventName.js";
import * as echarts from "echarts";
import emitter from "@/utils/emitter.js";
import theme from "../../../../static/theme/walden.json"

let option;
let myChart;
let chartDom;

let data

onMounted(()=>{
  data = useDetailedStore().detailedData.get(detailedRateEvent)
  useDetailedStore().detailedLoadFlag.set(detailedRateEvent,true)
  console.log(data)
  chartDom = document.getElementById('detailed-rate-main');
  myChart = echarts.init(chartDom,theme);
  option = createOption(data)
  option && myChart.setOption(option);
})

emitter.on(detailedRateEvent,(value)=>{
  option = createOption(value)
  option && myChart.setOption(option);
})

function createOption(value){
  return {
    title: {
      text: '出生率，死亡率，自然增长率',
      textStyle: {
        fontSize:15 // 设置标题字体大小
      },
      left:"center"
    },
    legend:{
      data:['出生率','死亡率','自然增长率'],
      left: 10
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: value.xAxisData
    },
    yAxis: {
      type: 'value',
      show: false
    },
    series: [
      {
        name: '出生率',
        type: 'line',
        stack: 'Total',
        data: value.birthrate
      },
      {
        name: '死亡率',
        type: 'line',
        stack: 'Total',
        data: value.mortality
      },
      {
        name: '自然增长率',
        type: 'line',
        stack: 'Total',
        data: value.naturalGrowthRate
      },
    ]
  };
}


</script>